﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wap/Shop/ShopSite.Master" AutoEventWireup="true"  CodeBehind="ProductListS.aspx.cs" Inherits="ZLCMS.Web.Wap.Shop.ProductListS" %>
<%@ Register src="Footer.ascx" tagname="Footer" tagprefix="uc1" %>
<%@ Import Namespace="ZLCMS.Business.Util" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>产品列表-搜索结果</title>
    <!--E banner-->

    <style type="text/css">
	.ui-panel-dismiss-open.ui-panel-dismiss-position-right{background:rgba(0, 0, 0, 0.5)!important; filter:Alpha(opacity=50); }
	#mypanel{ box-shadow:none;}
	#mypage .ui-input-search{border: none;}
	#mypage .ui-input-clear{ height: 22px; width: 22px;}
	.proList ul li.tmps3 .Right .name span{font-size:11px;height:14px;padding:0 3px;line-height:normal;margin-right:2px;color:#fff;background:#f9384d;}
    </style>
    
    <!--panel 打开时禁止滚动-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pages" runat="server">
<!--S page -->
<div data-role="page" id="mypage" style="background-color:#fff">

    <!--S panel-->
    <div data-role="panel" id="choosepanel" data-display="overlay" data-position="right">
    	<div data-role="header">
        	<a href="#" data-rel="close">取消</a>
        	<h2>筛选</h2>
            <a href="#" onclick="querySearchProp();">确认</a>
		</div>
        <div role="main" class="ui-content">
        <div data-role="collapsible-set" class="searchpropcontainer" data-iconpos="right" data-inset="false">
                                        
            </div>  
        </div><div data-role="footer" class="panelfooter">
        	<a href="#" onclick="$('.searchpropcontainer').searchPropHandler().clearSelected()">清楚所有选项</a>
        </div>
	</div>
    <!--E panel-->

	<!--S header -->
	<div data-role="header">
    	<table width="98%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td class="choosebtn" style="width:20%;display:none"><a href="#choosepanel" data-role="button"><img src="images/header_class.png"  ></a></td>
            <td style="padding-left:5px"><input type="search" id="keyword" placeholder="请输入搜索关键词" value="<%=Request["keyword"] %>"></td>
            <td><input name="" type="button" value="搜索" onclick="queryData();"></td>
          </tr>
        </table>
	</div>
    <!--E header -->
	
    <!--S content -->
	<div role="main" class="ui-content">
        <div class="prolist_nav">
        <input type="hidden" id="orderfield"/>
        <input type="hidden" id="orderdirection"/>
    <div data-role="navbar" style="display: none;">
        <ul class="orders">
        <li order="SalePrice" dir='0'><a data-theme="m" href="javascript:void(0)">价格</a></li>
        <li order="SellCount" dir='0'><a data-theme="m" href="javascript:void(0)">销量</a></li>
        <li order="GroundingTime" dir='0'><a data-theme="m" href="javascript:void(0)">上架时间</a></li>
        </ul>
    </div>
    </div>
        <!--s proList-->
        <div class="proList" >
        	<ul id="searchResult">

            </ul>
            <div style="display:none">
                <button id="btnMore" data-icon="refresh" style="width: 95%; margin-left: auto; margin-right: auto;">显示更多</button>
            </div>
        </div>
        <!--e proList-->
        
    </div>
    <!--E content -->
	
    <!--S footer -->
	<div data-role="footer" data-position="fixed" data-tap-toggle="false">    
                <uc1:Footer ID="Footer1" runat="server"  MenuId="S" />    
    </div>
    <!--E footer -->
</div>
<!--E page -->
  
<script src="/wap/lib/common/listviewHandler.js" type="text/javascript"></script>
<script src="js/searchPropHandler.js" type="text/javascript"></script>

<script type="text/javascript">
    var searchPropList = [];
    $('ul.orders li[order]').click(function () {
        var imgSrc = 'images/sxtop_icon.png';
        if ($(this).attr('dir') == '0') {
            $('ul.orders li[order]').each(function () {
                $('a>img', $(this)).remove();
                $(this).attr('dir', '0');
            });
            $('a', $(this)).prepend('<img src="">');
        }

        if ($(this).attr('dir') == 'desc') {//升序改为降序
            $(this).attr('dir', 'asc');
            imgSrc = 'images/sxbottom_icon.png';
        } else {//默认降序
            $(this).attr('dir', 'desc');
            imgSrc = 'images/sxtop_icon.png';
        }

        $('a>img', $(this)).attr('src', imgSrc);
        queryData();
    });

    function queryData() {
        var handler = $('#searchResult').listviewHandler();

        var itemTemplateS1 = '<li class="tmps1" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                	+ '<div class="img"><img src="{ThumbnailImg}">'
                    + '<div class="tit">'
                    + '<div class="left"><span>{TagType}</span>{ProductName}</div>'
                    + '<div class="right"></div>' //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                    + ' </div>'
                    + '<p>￥{SalePrice}</p>'
                + '</li>';

        var itemTemplateS2 = '<li class="tmps2" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                	+ '<img src="{ThumbnailImg}">'
                    +'<div class="txt"><span>{TagType}</span>{ProductName}</div>'
                    + '<div class="tit">'
                    + '<div class="left"><i>￥</i>{SalePrice}</div>'
                    + '<div class="right"></div>' //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                + '</li>';

        var itemTemplateS3 = '<li class="tmps3" onclick="location.href=\'/Wap/Shop/ProductDetail.aspx?no={ProductNo}\'">'
                    +'<div class="Left" style="background:url({ThumbnailImg}) no-repeat; background-size:cover;"></div>'
                    +'<div class="Right">'
                    +'<div class="txt name">{TagType}{ProductName}</div>'
                    + '<div class="tag">{MyShortDescTag}</div>'
                    +'<div class="txt txtsum">{ShortDesc}</div>'
                    + '<div class="tit">'
                    + '<div class="left"><i>￥</i>{SalePrice}</div>'
                    + '<div class="right"></div>' //<a href="/Wap/Shop/ProductDetail.aspx?no={ProductNo}" data-ajax="false"><img src="images/cart_icon.png"></a>
                    + '<div class="clear"></div>'
                    + '</div>'
                    +'</div>'
                +'</li>';


        var tempStyle = itemTemplateS<%= Request["tmps"] == null ? "3" : Request["tmps"] %>;

        handler.initialize({
            loaderBtn: $('#btnMore'), //加载数据按钮（点击加载下一页）
            emptyHtml: '无记录', //无记录时显示此html
            itemTemplate: tempStyle, //项模板
            pageIndex: 1, //页码（从1起算）
            pageSize: 10, //页大小
            totalCount: 999, //总记录数
            itemHandler: function (data, itemTemplate, container) {//数据各项处理
                data.ThumbnailImg = firstThumbnail(data.ThumbnailImg);
                data.TagType="";
               //判断TagKind类型
                var New_TagType = [];
                for(i=0;i<data.TagKind.length;i++) {
　　                  var items=data.TagKind[i];
　　                  if($.inArray(items,New_TagType)==-1) {
　　　　                New_TagType.push(items);
                        switch (New_TagType[i]) {
                            case "discount":data.TagType += data.TagType+'<span>直降</span>';break;
                            case "conditional_discount":data.TagType += data.TagType+'<span>满减</span>';break;
                            case "shipfee":data.TagType += data.TagType+'<span>包邮</span>';break;
                            case "coupon":data.TagType += data.TagType+'<span>优惠券</span>';break;
                            case "conditional_gift":data.TagType += data.TagType+'<span>满赠</span>';break;
                            case "gift":data.TagType += data.TagType+'<span>买赠</span>';break;
                            default:data.TagType += data.TagType+"";break;
                        }
　　                  };
                };
                var ShortDescTagArray =[];
                data.MyShortDescTag = '';
                if(data.ShortDescTag != null && data.ShortDescTag != ''){
                    ShortDescTagArray = data.ShortDescTag.split(',');
                    $(ShortDescTagArray).each(function(index){
                        if(this != ''){
                             switch (ShortDescTagArray[index]) {
                                case "全国包邮":data.MyShortDescTag += '<span class="baoyou">全国包邮</span>';break;
                                case "地标":data.MyShortDescTag += '<span class="dibiao">地标产品</span>';break;
                                case "有机认证":data.MyShortDescTag += '<span class="youji">有机认证</span>';break;
                                case "":break;
                                default:data.MyShortDescTag +='<span>'+this+'</span>';break;
                            }
                        };
                    });
                }

                return itemTemplate.format(data);
            },
            command: 'Pub.LoadProductList',
            parameter: { Keyword: $('#keyword').val(),SearchPropList:searchPropList, CategoryId: '<%=Request["categoryId"] %>', OrderField: $('ul.orders li[dir!="0"]').attr('order'), OrderDirection: $('ul.orders li[dir!="0"]').attr('dir') }
        });
        handler.nextPage();
    }

    function querySearchProp() {
        searchPropList = $('.searchpropcontainer').searchPropHandler().getResult();
        $("#choosepanel").panel("close");
        queryData();
    }

    //初始化搜索属性
    function initializeSearchProp() {
        $('.searchpropcontainer').executeCommand({ successCallBack: function (result, totalCount) {
            $('.searchpropcontainer').searchPropHandler({
                glist: result.List,
                //分组模板
                groupTemplate: '<div data-role="collapsible" sp_group="{id}">' +
                                '<h2><font>{name}</font><span class="selected_text">全部</span></h2>' +
                                 '<fieldset data-role="controlgroup" data-iconpos="right">{itemlist}</fieldset>' +
                            '</div>',
                //单选模板
                radioItemTemplate: '<input sp_item="{id}" name="sp_{gid}" id="sp_item_{id}" value="{id}" type="radio">' +
                            '<label for="sp_item_{id}">{name}</label>',

                //多选模板
                checkboxItemTemplate: '<input sp_item="{id}" name="sp_{gid}" id="sp_item_{id}" value="{id}" type="checkbox">' +
                            '<label for="sp_item_{id}">{name}</label>'
            });
            if (result.List.length > 0) { $('.choosebtn').show() };
        }
        }, 'Pub.LoadSearchPropList', { CategoryId: '<%=Request["CategoryId"] %>' });
    }


    $(function () {
        queryData();
        initializeSearchProp();
    });

    $(function () {
        $(window).scroll(function () {
            //当内容滚动到底部时加载新的内容

            if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {
                //当前要加载的页码
                $('#btnMore').click();
            }
        });
    });
</script>
</asp:Content>
